<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
      <tr>
        <td colspan="8" style="padding-bottom: 5px;">
          <template v-for="(modeName, mode) in modeList">
            <span class="l-btn l-btn-small l-btn-plain" :class="params.mode==mode?'selected':''"
                  @click="filter(mode)"><span class="l-btn-text">{{modeName}}</span></span>
          </template>
        </td>
      </tr>
      <tr>
        <td style="padding-right: 10px;">
          代理身份：
          <select v-model="params.agent_level" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
            <option v-for="(level_name,level) in agentLevel" :value="level">{{ level_name }}</option>
          </select>
        </td>
        <td>
          <div class="datagrid-btn-separator"></div>
        </td>
        <td style="padding-right: 10px; padding-left: 10px;">
          股东身份：
          <select v-model="params.gudong_level" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
            <option v-for="(level_name,level) in agentLevel" :value="level">{{ level_name }}</option>
          </select>
        </td>
        <td>
          <div class="datagrid-btn-separator"></div>
        </td>
        <td style="padding-right: 10px; padding-left: 10px;">
          推客身份：
          <select v-model="params.tuike_level" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
            <option v-for="(level_name,level) in tuikeLevel" :value="level">{{ level_name }}</option>
          </select>
        </td>
        <td>
          <div class="datagrid-btn-separator"></div>
        </td>
        <td style="padding-right: 10px; padding-left: 10px;">
          区域经销商身份：
          <select v-model="params.qudai_level" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
            <option v-for="(level_name,level) in qudaiLevel" :value="level">{{ level_name }}</option>
          </select>
        </td>
        <td>
          <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                  class="l-btn-text">查询</span></span></a>
          <a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                  class="l-btn-text">重置</span></span></a>
          <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                  class="l-btn-text">重载</span></span></a>
          <a href="javascript:void(0);" @click="allExport" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
                  class="l-btn-text">导出</span></span></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="rankinglistTable"></table>
</div>
<div id="rankinglistdlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
  var rankinglistVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        mode: 'today',
        agent_level:0,
        gudong_level:0,
        tuike_level:0,
        qudai_level:0,
      },
      defParams: {
        mode: 'today',
        agent_level:0,
        gudong_level:0,
        tuike_level:0,
        qudai_level:0,
      },
      modeList: JSON.parse('<?php echo addslashes($mode_list);?>'),
      agentLevel: JSON.parse('<?php echo addslashes($agent_level_list);?>'),
      tuikeLevel: JSON.parse('<?php echo addslashes($tuike_level_list);?>'),
      qudaiLevel: JSON.parse('<?php echo addslashes($qudai_level_list);?>'),
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {},
    methods: {
      init: function () {
        rankinglistReload();
      },
      filter(mode) {
        this.params.mode = mode;
        this.init();
      },
      reset:function (){
        this.params = JSON.parse(JSON.stringify(this.defParams));
        this.init();
      },
      allExport:function () {
        showLoading('.con');
        $.post('/admin/rankinglist/export', {
          qudai_level: this.params.qudai_level,
          tuike_level: this.params.tuike_level,
          gudong_level: this.params.gudong_level,
          agent_level: this.params.agent_level,
          mode: this.params.mode,
        }, function (data) {
          hideLoading();
          if (parseInt(data.ret) === 0) {
            $.messager.show({
              title: '提示',
              msg: data.msg,
              timeout: 3000,
              showType: 'slide'
            });
            eventmaterialDownload(data.data);
          } else {
            $.messager.alert('提示', data.msg, 'warning');
          }
        }, 'json').fail((response)=> {
          hideLoading();
          $.messager.alert('提示', response.responseText, 'warning');
        });
      },
    }
  });

  var orderList = function (ele){
    let e = $(ele);
    let id = e.attr('data-id');
    let member = e.attr('data-member');
    console.log(id, member);
    if(id){
      $("#rankinglistdlg").dialog({
        title: `会员 ${member} 的销售订单列表`,
        closed: false,
        width: 940,
        height: 560,
        cache: false,
        href: '/admin/rankinglist/orderlist?id=' + id,
        modal: true,
        buttons: [{
          text: '关闭',
          iconCls: 'icon-no',
          handler: function () {
            $("#rankinglistdlg").dialog('close');
          }
        }]
      });
    }else{
      $.messager.alert('错误', '业绩参数出错', 'error');
    }
  };

  var rankinglistReload = function () {
    if(rankinglistVm.initLoad){
      rankinglistVm.initLoad = false;
    }else{
      $("#rankinglistTable").datagrid('load', rankinglistVm.params);
    }
  };

  var rankinglistSearch = function () {
    var height = $(window).height() - $(".top").height() - 46;
    var width = $(window).width() - $(".leftmenu").width() - 8;
    $("#rankinglistTable").datagrid({
      title: '销售业绩统计排名',
      width: width,
      height: height,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'consume',
      sortOrder: 'desc',
      idField: 'member_id',
      url: '/admin/rankinglist/index',
      queryParams: rankinglistVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'member_id',title:'会员ID', width: fixWidth(5), align: "center", halign: 'center'},
        {
          field:'member',title:'用户', width: fixWidth(20), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            let content = '';
            if(value){
              if(value.avatar){
                content += '<div style="display: flex" class="touxiang_wenzi">';
                content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
                content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
              }else{
                content += '<div class="touxiang_wenzi">';
              }
              content += '用户ID：<span>'+rowData.member_id+'</span><br>';
              if(value.realname){
                content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
              }else{
                content += '昵称：<span>'+value.nickname+'</span><br>';
              }
              content += '手机号：<span>'+value.phone+'</span>';
              if(value.avatar){content += '</div>';}
              content += '</div>';
            }else{
              return rowData.member_id+'不存在';
            }
            return content;
          }
        },
        {
          field: 'agent',title:'代理身份', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            if(value){
              if(value.level_info && !$.isArray(value.level_info)){
                return value.level_info.name;
              }else{
                return value.level;
              }
            }
            return '非代理';
          }
        },
        {
          field: 'gudong',title:'股东身份', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            if(value){
              if(rowData.agent){
                if(rowData.agent.level_info && !$.isArray(rowData.agent.level_info)){
                  return rowData.agent.level_info.name;
                }else{
                  return rowData.agent.level;
                }
              }else{
                return '非代理股东';
              }
            }
            return '非股东';
          }
        },
        {
          field: 'tuike',title:'推客身份', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            if(value){
              if(value.tuike_level && !$.isArray(value.tuike_level)){
                return value.tuike_level.name;
              }else{
                return value.level;
              }
            }
            return '非推客';
          }
        },
        {
          field: 'qudai',title:'区域经销商身份', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            if(value){
              if(value.qudai_level && !$.isArray(value.qudai_level)){
                return value.qudai_level.name+'('+value.area_name+')';
              }else{
                return value.area_level;
              }
            }
            return '非区域经销商';
          }
        },
        {
          field: 'consume',title:'销售业绩', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            return '<div data-id="'+rowData.id+'" data-member="'+(rowData.member?rowData.member.nickname:rowData.member_id)+'" class="orderListBtn" onclick="orderList(this)">￥'+value+'/'+rowData.order_num+'单</div>';
          }
        },
        {field:'created_at',title:'汇总时间', width: fixWidth(10), align: "center", halign: 'center'},
      ]],
    });
    rankinglistVm.initLoad = true;
  };
  onDatagridResize("#rankinglistTable");
  rankinglistSearch();
</script>
<style>
  .log_remark > *{
    white-space: pre-wrap !important;
  }
  .change_before{
    color: #207ab0;
  }

  .change_after{
    color: #ef6d1b;
  }

  .score_add{
    color: #08de4d;
  }

  .score_subtract{
    color: #c40908;
  }

  .event_backofficechange{
    color: #037e2a;
  }

  .event_signin{
    color: #750302;
  }

  .event_transfer{
    color: #818105;
  }

  .event_orderpay{
    color: #bd09d9;
  }

  .event_refund{
    color: #d51313;
  }

  .event_orderaward{
    color: #ee650c;
  }

  .event_share{
    color: #007293;
  }

  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }

  .datagrid-body-row td{
    line-height: 1.8em !important;
  }

  .datagrid-row td{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.8em !important;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }

  .touxiang_wenzi span{
    color: #007293;
  }

  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }

  .orderListBtn{
    cursor: pointer;
    color: #1d72d5;
  }

  .orderListBtn:hover{
    color: #022f7b;
  }
</style>
